<!--
 * @Author: 码上talk|RC
 * @Date: 2021-08-04 11:46:41
 * @LastEditTime: 2021-10-19 11:33:30
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/axq/pages/notice/list.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="notice">
    <view class="notice-item" v-if="newNoticeList.length !== 0">
      <a-title>最新通知</a-title>
      <view class="notices-wrap">
        <notice-card v-for="(n,i) in newNoticeList" :key="i" latest :data="n"></notice-card>
      </view>
    </view>
    <view class="notice-item" v-if="noticeList.length !== 0">
      <a-title>历史通知</a-title>
      <view class="notices-wrap">
        <notice-card v-for="(n,i) in noticeList" :key="i" :data="n"></notice-card>
      </view>
    </view>
    <a-empty
      v-if="newNoticeList.length === 0"
      :src="'empty/order.png'|prefixOssUrl"
      :tips="['暂无相关通知']"
    ></a-empty>
  </view>
</template>

<script>
import NoticeCard from './@fragment/card'
import { model } from '@/model';

const { AxqNotice } = model.collection;
export default {
  components: {
    NoticeCard
  },
  data () {
    return {
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      notices: [],
      newNoticeList: [],
      noticeList: []
    }
  },
  onLoad () {
    this.getNoticeList()
  },
  onReachBottom () {
    if (this.total > (this.params.pageIndex * this.params.pageSize)) {
      this.params.pageIndex++;
      this.getNoticeList(true)
    }
  },
  methods: {
    getNoticeList (flag = false) {
      AxqNotice.sendApi('noticePage', {
        params: this.params,
        data: {}
      }).then(res => {
        const {
          status,
          data,
          page
        } = res;
        if (status) {
          this.total = page.total;
          if (data.length !== 0) {
            if (flag) {
              this.noticeList = this.noticeList.concat(data);
            } else {
              this.newNoticeList = data.slice(0, 3)
              this.noticeList = data.slice(2)
            }
          }
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.notice {
  background: @background-color-base;
  height: 100vh;
  padding: 20rpx 30rpx;
}
</style>